<template>
  <div class="home-key-work-wrap" @click="handlePathClick">
    <div class="top flex items-center">
      <label class="work-label flex-center">重点工作</label>
      <p><span>{{allTotal}}</span>项</p>
    </div>
    <div class="bottom flex-between">
      <div class="item" v-for="(item,index) in typeList" :key="index">
        <p>{{item.name}}</p>
        <p class="num" :style="{color: item.color}">{{item.value}}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import useQuotaItem from '@/components/QuotaItem/useQuotaItem'
import { useRouter } from 'vue-router'
import keyWorkServe from "@/api/keyWork"

defineOptions({
  name: 'KeyWorkHome'
})

const typeList = ref([
  {
    name: '已办结',
    value: '0',
    color: '#26D088'
  },
  {
    name: '进行中',
    value: '0',
    color: '#FF9928'
  },
  {
    name: '已终止',
    value: '0',
    color: '#979797'
  },
  {
    name: '超期',
    value: '0',
    color: '#FF4935'
  }
])

const emit = defineEmits([])
const router = useRouter()

const allTotal = ref(0)
const getFocusWork = () => {
  keyWorkServe.focusWorkHome().then(res => {
    let resp = res.data
    typeList.value[0].value = resp.completed
    typeList.value[1].value = resp.inProgress
    typeList.value[2].value = resp.terminated
    typeList.value[3].value = resp.overdue
    allTotal.value = resp.total
  })
}
getFocusWork()
const itemTime = (item: any) => {
  if(item)
    return useQuotaItem(item).timestr.value
  else
    return ''
}

const handlePathClick = () => {
  router.push({
    path: '/keyWork'
  })
}

</script>

<style lang="less" scoped>
.home-key-work-wrap {
  background: url("@/assets/home/work-bg.png") no-repeat 0 -18px;
  background-size: 351px 145px;
  height: 126px;
  width: 351px;
  margin: 0 11px 10px;
  position: relative;
  .top{
    padding: 20px 0 0 20px;
    color: #21212199;
    font-size: 14px;

    .work-label{
      background: url("@/assets/home/work-label-bg.png") no-repeat;
      background-size: 80px 29px;
      height: 29px;
      width: 80px;
      color: #FFFFFF;
      font-weight: bold;
      font-size: 14px;
    }
    span{
      color: #212121;
      font-family: DINPro;
      font-weight: bold;
      font-size: 28px;
      padding: 0 4px 0 8px;
    }
  }
  .bottom{
    padding: 28px 0 0;
    color: #000000;
    font-weight: bold;
    font-size: 13px;
    .item{
      height: 30px;
      border-left: 1px solid rgba(61, 118, 204, 0.2);
      width: 25%;
      text-align: center;
      &:first-child{
        border: none;
      }
    }
    .num{
      font-family: DINPro;
      font-weight: bold;
      font-size: 20px;
      margin-top: 3px;
    }
  }
}
</style>
